<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!-- 审核规则管理页面 -->
<main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden" id="mainContent">
    <?php include $_view_obj->compile("main_header.html"); ?>
    
    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto p-6 scrollbar-thin">
        <div class="bg-white rounded-xl shadow-sm border border-neutral-200 mb-6 overflow-hidden">
            <div class="p-5 border-b border-neutral-200">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <h3 class="font-bold text-lg">审核规则管理</h3>
                    
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="applyTypeFilter">
                                <option value="">全部适用类型</option>
                                <option value="媒体">媒体</option>
                                <option value="言论">言论</option>
                                <option value="合集">合集</option>
                                <option value="全部">全部</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>

                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="statusFilter">
                                <option value="">全部状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <div class="relative">
                            <input type="text" class="w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="搜索规则名称/ID" id="keywordSearch">
                            <button class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                        
                        <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="addRuleBtn">
                            <i class="fa fa-plus mr-1"></i> 新增规则
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 规则列表 -->
            <div class="overflow-x-auto">
                <table class="w-full" id="ruleTable">
                    <thead>
                        <tr class="bg-neutral-50 text-left">
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">规则ID</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">规则名称</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">适用类型</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">创建人</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">创建时间</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">更新时间</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-neutral-200 bg-white" id="ruleTableBody">
                        <!-- 表格内容将通过JS动态加载 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div class="px-5 py-4 border-t border-neutral-200 flex items-center justify-between">
                <div class="text-sm text-neutral-500 pagenation">
                    显示 1 至 10 条，共 42 条
                </div>
                <div class="flex space-x-1" id="paginationContainer">
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">4</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">5</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 规则编辑/新增模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="ruleModal">
    <div class="bg-white rounded-xl w-full max-w-2xl p-6">
        <h3 class="text-lg font-bold mb-4" id="modalTitle">新增审核规则</h3>
        <form id="ruleForm">
            <input type="hidden" id="ruleId">
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="ruleBusinessId">业务ID</label>
                <input type="text" id="ruleBusinessId" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如RUL-7890" readonly>
                <p class="text-xs text-neutral-500 mt-1">系统自动生成唯一业务ID</p>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="ruleName">规则名称 <span class="text-danger">*</span></label>
                <input type="text" id="ruleName" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入规则名称" required>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="ruleContent">规则内容描述 <span class="text-danger">*</span></label>
                <textarea id="ruleContent" rows="5" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请详细描述规则内容" required></textarea>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="applyType">适用类型 <span class="text-danger">*</span></label>
                <select id="applyType" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                    <option value="">请选择适用类型</option>
                    <option value="媒体">媒体</option>
                    <option value="言论">言论</option>
                    <option value="合集">合集</option>
                    <option value="全部">全部</option>
                </select>
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium mb-1">状态</label>
                <div class="flex items-center space-x-4">
                    <label class="inline-flex items-center">
                        <input type="radio" name="status" value="1" class="text-primary focus:ring-primary" checked>
                        <span class="ml-2 text-sm">启用</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" name="status" value="0" class="text-primary focus:ring-primary">
                        <span class="ml-2 text-sm">禁用</span>
                    </label>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button type="button" class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelModalBtn">取消</button>
                <button type="submit" class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="saveRuleBtn">保存规则</button>
            </div>
        </form>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="deleteConfirmModal">
    <div class="bg-white rounded-xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-2">确认删除</h3>
        <p class="text-neutral-500 mb-4">您确定要删除此审核规则吗？此操作不可撤销。</p>
        <input type="hidden" id="deleteRuleId">
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelDeleteBtn">取消</button>
            <button class="flex-1 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors" id="confirmDeleteBtn">确认删除</button>
        </div>
    </div>
</div>

<script src="/i/js/audit.rules.js"></script>
